<template>
  <div class="hot_page">
       <Card :padding="0" shadow style="width: 100%;">
            <p slot="title">
               <Icon type="ios-flame" />
                热门文章
            </p>
            <ul class="tag">
                <li v-for="(item,index) in data " :key="index">
                    <Tag :color="color[index]">{{index + 1}}</Tag>
                    <router-link   :to="'/article/' + (item._id ? item._id : '') ">
                        {{item.contentTitle}} 
                    </router-link>
                        <div class="icon-right">
                            <Icon type="ios-eye" size="20"/>
                            {{item.PV}}浏览
                        </div>
                </li>
            </ul>
        </Card>
  </div>
</template>

<script>
export default {
    data(){
        return{
            data:[],
            color:['red','primary','success']
        }
    },
    methods:{
        init(){
            this.$axios.get('/api/hot').then(res=>{
               this.data = res.data.data
            })
        }
    },
    mounted(){
        this.init()
    }

}
</script>

<style scoped>
    .hot_page{
        margin-top: 10px;
    }
   .tag li{
        list-style: none;
        margin-left: 10px;
        padding-right:20px;
    }
    .tag{
        padding: 6px;
    }
    .icon-right{
        float: right;
    }
    .tag li a{
        color: #515A6E
    }
     .tag li a:hover{
         text-decoration: underline;

     }
</style>